<template>
  <div>
    <el-dialog :visible="isShow" title="分配权限" @close="closeEvent">
      <!--
        check-strictly ： 父选项不影响子选项
         show-checkbox ：多选
        node-key="id"：每个树节点的id
        :default-checked-keys="defaultKeys" ： 通过id来设置多选的选项
       -->
      <el-tree
        ref="tree"
        :data="treeList"
        :props="{ label: 'name' }"
        check-strictly
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultKeys"
      />
      <template>
        <div style="text-align: center">
          <el-button @click="closeEvent">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { sysPermission } from '@/api/permission.js'
import { changeData } from '@/utils/index.js'
import { sysRoleBuId, sysRoleAssignPerm } from '@/api/setting.js'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  data() {
    return {
      treeList: [],
      defaultKeys: [],
      id: ''
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    closeEvent() {
      this.$emit('update:isShow', false)
      // 组件内部的方法
      // 关闭时将多选框的id设置为空
      this.$refs.tree.setCheckedKeys([])
    },
    async getData() {
      const res = await sysPermission()
      // 树形数据转换调用之前的工具型方法
      this.treeList = changeData(res.data, '0')
      // console.log(res.data)
    },
    // 获取角色详情
    async getRoleInfo(row) {
      this.id = row.id
      // 通过将点击的节点id传给接口
      // 接口显示当前点击的节点的权限id
      const res = await sysRoleBuId(row.id)
      // 组件内部的方法
      // 可以根据权限id来显示对选框的选中
      this.$refs.tree.setCheckedKeys(res.data.permIds)
      // console.log(row.id)
      // console.log(res.data)
    },
    // 修改角色分配
    async submit() {
      // 可以获取对选框中选中的权限id
      await sysRoleAssignPerm(this.id, this.$refs.tree.getCheckedKeys())
      this.$message.success('分配成功')
      this.closeEvent()
    }
  }
}
</script>
<style lang="less" scoped></style>
